<template>
    <div>
        echarts图表
        <div id="main" style="width:95%;height:500px"></div>
    </div>
</template>

<script>
    export default {
        name:"echarts",
        data(){
            return {

            }
        },
        mounted(){
            this.getData()
        },
        methods:{
            getData(){
                let myChart = this.$echarts.init(document.getElementById('main'));
                //绘制图表
                // myChart.setOption({
                //     title: {
                //         text: 'ECharts 入门示例'
                //     },
                //     tooltip: {},
                //     xAxis: {
                //         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                //     },
                //     yAxis: {},
                //     series: [
                //         {
                //         name: '销量',
                //         type: 'bar',
                //         data: [5, 20, 36, 10, 10, 20]
                //         },
                //         {
                //         name: '耗材',
                //         type: 'line',
                //         data: [10, 5, 30, 20, 5, 25]
                //         },
                //     ]
                // });
                myChart.setOption({
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [50, 250],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            { value: 40, name: 'rose 1' },
                            { value: 38, name: 'rose 2' },
                            { value: 32, name: 'rose 3' },
                            { value: 30, name: 'rose 4' },
                            { value: 28, name: 'rose 5' },
                            { value: 26, name: 'rose 6' },
                            { value: 22, name: 'rose 7' },
                            { value: 18, name: 'rose 8' }
                        ]
                        }
                    ]
                });
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>